const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = {
	// 单入口
	entry: {
		index: './src/js/index.js',
	},
	// 1.codesplit-多入口，每个入口输出一个bundle
	/* entry: {
		index: './src/js/index.js',
		test: './src/js/test.js'
	}, */
	output: {
		filename: 'js/bundle.[name].[contenthash:10].js',
		path: resolve(__dirname, 'dist')
	},
	module: {
		rules: [
			
		]
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: './src/index.html',
		}),
	],
	// 2.codesplit-配置optimization
	
	// 作用：将引用的node_modules中第三方库单独打包成一个bundle
	// 好处：多入口每个文件都引用同一个库如jquery会重复打包至每个入口对应的bundle造成资源浪费
	optimization: {
		splitChunks: {
			chunks: 'all',
		}
	},
	mode: 'development',
}